<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>CSS3 3D转换</title>
    <script src="./prefixfree.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		
		div {
			margin-bottom: 50px;
		}
		
		.translateX {
			width: 150px;
			height: 150px;
			background-color: lightblue;
			transition: all 1s;
		}
		
		.translateX:hover {
			transform: perspective(100px) translateX(300px);
		}
		
		.translateY {
			width: 150px;
			height: 150px;
			background-color: lightblue;
			transition: all 1s;
		}
		
		.translateY:hover {
			transform: perspective(100px) translateY(400px);
		}
		
		.translate {
			perspective: 600px;
		}
		
		.translateZ {
			width: 150px;
			height: 150px;
			margin: 0 auto;
			background-color: lightblue;
			transition: all 1s;
		}
		
		.translateZ:hover {
			transform: perspective(1000px) translateZ(1400px);
		}
	</style>
</head>

<body>
	<div class="translateX">translateX</div>
	<div class="translateY">translateY</div>
	<div class="translate">
		<div class="translateZ">translateZ</div>
	</div>
</body>

</html>